<header>
  <h1>druid {{ env ? env : 'cluster' }}
    <span
      class="rule-editor-link"
      ng-controller="ClusterConfigCtrl"
      tooltip="edit {{ env ? env : 'cluster' }} cluster configuration"
      tooltip-trigger="mouseenter"
      tooltip-placement="bottom"
    >
      <a ng-click="open()"><span class="fa fa-pencil"></span></a>
    </span>
  </h1>

  <site-nav></site-nav>
</header>

<div class="primary-view cluster-view">

  <div id="middle">

    <div id="data-sources">
      <h2 ng-init="showQuery = false" ng-click="showQuery = !showQuery">
        <span><a ui-sref="dataSources"><span ng-if="dataSources">{{ dataSources.length }}</span> datasources</a></span>
      </h2>
      <table ng-if="dataSources">
        <thead>
          <tr>
            <th class="load-status" title="available">a</th>
            <th><input id="data-source-query" ng-model="query.id" placeholder="filter datasources" class="name"></th>
          </tr>
        </thead>
        <tbody>
          <tr class="data-source" ng-repeat="ds in dataSources | filter:query">
            <td>
              <div ng-if="ds.hasOwnProperty('loadStatus')" class="load-status {{ ds.loadStatus >= 100 ? 'loaded' : (ds.loadStatus >= 99 ? 'one-percent' : 'unloaded')}}" tooltip="{{ ds.id }}: {{ 1 - ds.loadStatus/100.0 | percentRound }} to load until available" tooltip-trigger="mouseenter" tooltip-placement="right">
                <i class="fa {{ ds.loadStatus >= 100 ? 'fa-circle-o' : (ds.loadStatus > 99 ? 'fa-dot-circle-o' : 'fa-circle')}}"></i>
              </div>
            </td>
            <td class="name"><a ui-sref="dataSource({id:ds.id})">{{ ds.id }}</a></td>
          </tr>
          <tr class="key">
            <td colspan="2">Key</td>
          </tr>
          <tr class="data-source">
            <td>
              <div class="load-status loaded" title="nothing to load">
                <i class="fa fa-circle-o"></i>
              </div>
            </td>
            <td class="name">fully available</td>
          </tr>
          <tr class="data-source">
            <td>
              <div class="load-status one-percent" title="< 1% to load">
                <i class="fa fa-dot-circle-o"></i>
              </div>
            </td>
            <td class="name">> 99% available</td>
          </tr>
          <tr class="data-source">
            <td>
              <div class="load-status unloaded" title="> 1% to load">
                <i class="fa fa-circle"></i>
              </div>
            </td>
            <td class="name">≤ 99% available</td>
          </tr>
          <tr class="data-source">
            <td colspan="2">Hover over the icon next to each datasource for its specific availability.</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div id="tiers">
      <div class="tier" ng-repeat="tier in tiers">
        <h2>
          {{ tier.tier | tierName  }}
          <span class="load queue" ng-if="tier.segmentsToLoad">
            <span class="bytes">
              {{ tier.segmentsToLoadSize | bytes }}
            </span>
            ({{ tier.segmentsToLoad | number }} segments) to load
          </span>
          <span class="drop queue" ng-if="tier.segmentsToDrop">
            <span class="bytes">
              {{ tier.segmentsToDropSize | bytes }}
            </span>
            ({{ tier.segmentsToDrop | number }} segments) to drop
          </span>
        </h2>
        <tier-capacity></tier-capacity>
        <div class="capacity-history"></div>
        <tier-nodes></tier-nodes>
      </div>
    </div>

  </div>
</div>
